<template>
  <div class="wave" ref="waveDom" :style="styles">
      <div class="before" ref="waveBefore" :style="cutWidth"></div>
    <div class="after" ref="waveAfter" :style="cutWidth"> </div>
  </div>
</template>
<script>
export default {
  name:"",
  props:{
    running:{
      type:Boolean,
      default:false
    },
    controlRun:{
      type:Boolean,
      default:false
    },
    width:{
     type:Number,
      default:'200'
    },
    unit:{
      type:String,
      default:"px"
    },
    backgroundDeep:{
      type:String,
      default:'green'
    },
    backgroundLight:{
      type:String,
      default:'#aaff88'
    },
     backBg:{
      type:String,
      default:'#fff'
    }
  },
  data(){
    return{
      styles:{}, //波浪的大小
      cutWidth:{}, //剪切图形的大小
      cutWidthAfter:{}, // 之后剪切图形的大小
      beforeBtDistance:0,// 前浪底部距离
      afterBtDistance:0, // 后浪底部距离
      beforeTopDistance:0, // 前浪距顶距离
      afterTopDistance:0, // 后浪距顶距离
      interval:0, // 浪上升下降幅度
      gapInstance:0, //前浪后浪差距
    }
  },
  created(){
    this.initData()

  },
  watch:{
    // 是否运行控制
    controlRun(val){
      if(val){
        this.createdWave()
      }else{
        this.cancel()
      }
    }
  },
  methods:{
    initData(){
      this.beforeBtDistance = -this.width/3  // 前浪底部距离
      this.afterBtDistance = -this.width/3-this.width/10 // 后浪底部距离
      this.beforeTopDistance = -this.width*5/6 // 前浪距顶距离
      this.afterTopDistance = -this.width*5/6-this.width/10 // 后浪距顶距离
      this.interval = this.width / 60 // 浪上升下降幅度
      this.gapInstance = -this.width /10 // 前浪后浪差距
      //波浪的大小
      this.styles={
        width:this.width+this.unit,
        height:this.width+this.unit,
        backgroundImage: `linear-gradient(-180deg, ${this.backgroundLight } 13%, ${this.backgroundDeep} 91%)`
      }
      //剪切图形的大小
      this.cutWidth={
        width:(this.width/3)*4+this.unit,
        height:(this.width/3)*4+this.unit,
        marginLeft:-((this.width/3)*4)/2+this.unit,
        backgroundColor:this.backBg
      }
    },
    createdWave(){
    let beforeDom = this.$refs.waveBefore
    let afterDom = this.$refs.waveAfter
    let i=this.beforeBtDistance,j=this.afterBtDistance
     let timer = setInterval(()=>{
       i = i - this.interval;
       if(i<this.beforeTopDistance){
          this.lockBtn = true
          this.$emit('update:lockBtn',true)
         clearInterval(timer)
       }
       beforeDom.style.marginTop = i +this.unit
       afterDom.style.marginTop = i +this.gapInstance+this.unit
     },30)
     // 激活 running 
     this.$emit('update:running',true)
    },
    cancel(){
      let beforeDom = this.$refs.waveBefore
      let afterDom = this.$refs.waveAfter
      let i=this.beforeTopDistance,j=this.afterTopDistance
      let timer = setInterval(()=>{
        i = i + this.interval;
        if(i>=0){
          this.lockBtn = true
          this.$emit('update:running',false)
          this.$emit('update:lockBtn',true)
          clearInterval(timer)
        }
        beforeDom.style.marginTop = i + this.unit
        afterDom.style.marginTop = i + this.gapInstance +this.unit
      },30)
    }
  },
}
</script>
<style lang="scss">
.wave {
	position: relative;
	border-radius: 100%;
  opacity: 0.7;
  overflow: hidden;
   .before,
   .after {
		position: absolute;
		top: 0;
    left:50%;
		z-index: 20;
		content: "";
	}
	 .before {
		border-radius: 45%;
    transform: all 0.3s;
    animation: rotate 10s linear -5s  infinite;
    background:#fff;
    opacity: 0.5;
	}
	 .after {
		border-radius: 40%;
    animation: rotate 15s infinite;
    background:#fff;
    opacity:  0.8;
	}
  &.blue {
		border-color: #288aff;
		.wave {
			// background-image: linear-gradient(-180deg, #98beec 13%, #288aff 91%);
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(1turn);
	}
}
</style>